<template>
  <div>
    <h1>App:{{ count }}---{{ num }}</h1>
    <!-- 
      如果做父子组件双向绑定的时候,需要绑定2个及以上的值,则v-model已经不再适用了,因为v-model只能使用一次,多次会覆盖的
      我们就只能使用原始的写法 :xxx绑定props + @xxx绑定自定义事件

     -->
    <Count
      :count="count"
      @update:count="count = $event"
      :num="num"
      @update:num="num = $event"
    />

    <hr />

    <!-- 
      如果我们:xxx绑定props + @xxx绑定自定义事件 的方式写成如下格式
      `:xxx绑定props + @updata:xxx 绑定自定义事件`
      则可以直接简写为 `:xxx.sync="xxx"` 使用v-bind的.sync修饰符进行数据双向绑定
     -->
    <Count :count.sync="count" :num.sync="num" />
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name: "App",
  components: {
    Count,
  },
  data() {
    return {
      count: 0,
      num: 10,
    };
  },
};
</script>

<style></style>
